<template>
  <q-layout class='login-background'>
    <div class='absolute-center'>
      <q-card class='login-pannel'>
        <!--内容-->
        <q-card-section>
          <!--          大标题-->
          <div align='center' class='big-title'>
            <!--            logo图-->
            <div class='logo'>
            </div>
          </div>
          <!--          填写内容-->
          <div class='inside-pannel'>
            <!--            填写手机号-->
            <div class='row row-space'>
              <div class='col-2 input-label'>
                手机号：
              </div>
              <div class='col-8'>
                <q-input outlined label='输入手机号' v-model='loginID' maxlength='11' />
              </div>
            </div>

            <!--            填写密码-->
            <div class='row row-space'>
              <div class='col-2 input-label'>
                密码：
              </div>
              <div class='col-8'>
                <q-input outlined label='输入密码' v-model='passWd' type='password' />
              </div>
            </div>
            <!--            填写验证码-->
            <div class='row row-space'>
              <div class='col-2'>
              </div>
            </div>
            <!--            操作按钮-->
            <div class='row row-space'>
              <div class='col-2'>
              </div>
              <div class='col-6 col-space'>
                <q-btn class='login-control' label='登录' color='primary' @click='login' />
              </div>
              <div class='col-2'>
                <q-btn class='login-control' label='注册' @click='show_register =true' />
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-layout>

  <q-dialog v-model='show_register' small transition-show='flip-down' transition-hide='flip-up'>
    <q-card class='bg-primary text-white' align='center' style='width: 300px'>
      <q-bar>

        <q-space />

        <q-btn dense flat icon='close' v-close-popup>
          <q-tooltip content-class='bg-white text-primary'>关闭</q-tooltip>
        </q-btn>
      </q-bar>

      <q-card-section @click='to_compony' class='q-boxshadow'>
        公司注册
      </q-card-section>

      <q-card-section @click='to_staff'>
        员工注册
      </q-card-section>
    </q-card>
  </q-dialog>
    <div class='footers'>
      <a href="https://beian.miit.gov.cn" target="_blank">京ICP备18042819号-3</a >
    </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { postRequest, getRequest } from 'components/functions';
import { useStore } from '../store';
import { Api, Sphinx, UserData } from 'src/store/sphinx/state';

export default defineComponent({
  name: 'Login',
  setup() {
    const store = useStore();
    let loginID = ref<string>('15070536374');
    let passWd = ref<string>('admin123');
    let show_register = ref<boolean>(false);
    const router = useRouter();

    /**
     * 登录请求
     */
    function login() {
      postRequest('party/party/login', { userId: loginID.value, password: passWd.value }, getLoginData);
    }

    // 公司注册
    function to_compony() {
      void router.push('/register?type=1');
    }

    // 员工注册
    function to_staff() {
      void router.push('/register?type=2');
    }

    /**
     * 登录成功后异步调用
     * @param resData
     */
    function getLoginData(resData: UserData): void {
      // console.log(resData)
      //将登录成功的用户信息存至VUEX
      store.commit('sphinx/updateUserState', resData);
      //将登录成功的用户信息存至localstorage
      localStorage.setItem('loginedUserInfo', JSON.stringify(resData))
      //路由至主页面
      void router.push('/');
      //请求API列表接口
      // getRequest('channel/channelRout/getInterfa', getApi);
    }

    /**
     * API列表
     * @param apis
     */
    function getApi(apis: Api[]) {
      //将请求到的Api列表存入VUEX
      store.commit('sphinx/updateApiState', apis);
      //路由至主页面
      void router.push('/');
    }

    return {
      login,
      loginID,
      passWd,
      show_register,
      to_compony,
      to_staff
    };
  }
});
</script>
<style scoped lang='sass'>
.q-boxshadow
  box-shadow: 1px 0px 3px #ccc

.login-control
  width: 100%

.login-background
  background-color: rgb(170, 212, 245)

.row-space
  margin-bottom: 1em

.col-space
  padding-right: 1em

.q-input
  width: 100%

.input-label

  padding-top: 1.4em

.big-title
  margin-bottom: 2em
.footers
  background-color: white
  display: flex
  justify-content: center
  align-items: center
  height: 3em
.logo
  height: 8em

@mixin allSize-PX($pannel-width,$pannel-height,$pannel-padding)
  .login-pannel
    width: $pannel-width
    height: $pannel-height
  .inside-pannel
    padding-left: $pannel-padding
//桌面页面样式
@media screen and (min-device-width: 960px)
  @include allSize-PX($pannel-width: 36em, $pannel-height: 42em, $pannel-padding: 10%)
//移动页面样式
@media screen and (max-device-width: 960px)
  @include allSize-PX($pannel-width: 24em, $pannel-height: 36em, $pannel-padding: 1%)
</style>
